<script lang="ts" setup>
import { queryBikeTableCol } from '@/api/bike/types/bike'
defineProps<{
  data: queryBikeTableCol
}>()
</script>

<template>
  <el-card shadow="never" border-0>
    <template #header>
      <span>{{ data.productData?.name }}</span>
      <el-tag
        type="warning"
        plain
        v-for="(item, index) in data.productData?.tags.split('|')"
        :key="index"
        >{{ item }}</el-tag
      >
    </template>
    <span
      >型号:<span ml-5>{{ data.productData?.productModel }}</span></span
    >
    <span
      >电瓶电压:<span ml-5>{{ data.inputVoltage }}</span></span
    >
    <span
      >免押类型: <span ml-5>{{ data.productData?.depositType }}</span>
    </span>
    <span
      >押金金额:<span class="text-[#efa14e] ml-5">{{ data.productData?.deposit }}</span></span
    >
    <span
      >取车点:
      <el-button link v-if="data.bindAddress?.address">{{ data.bindAddress?.address }} ></el-button>
    </span>
    <span
      >还车点:
      <el-button link v-if="data.returnAddress?.address"
        >{{ data.returnAddress?.address }} ></el-button
      >
    </span>
    <div v-if="data.product">
      <span
        >可租周期
        <span class="text-[#999999] text-[12px]">(按月以租代购: 租满12个月车辆则车辆归属个人)</span>
      </span>
      <el-table :data="data.product" size="small" border mt-10>
        <el-table-column
          v-for="(value, name, index) in data?.product[0]"
          :key="index"
          :label="name as string"
          :prop="name as string"
        />
      </el-table>
    </div>
  </el-card>
</template>

<style scoped></style>
